<template>
  <div class="consign-details">
    <!-- 委托详情 -->
    <div class="title">委托详情</div>
    <div class="details-wrap">
      <div class="inquiry">
        <div class="date">{{ info.create_time }}</div>
        发起询盘
      </div>
      <m-form
        ref="form"
        :mode="formData"
        label-width="95px"
        label-position="left"
      >
        <m-form-item prop="info" label="委托编号：" style="margin-bottom: 0">
          <p class="number" style="font-size: 16px">{{ info.demand_order }}</p>
        </m-form-item>
        <m-form-item prop="name" label="产品名称：" style="margin-bottom: 0">
          <p class="name" style="font-size: 16px">{{ info.goods_info }}</p>
        </m-form-item>
        <m-form-item prop="type" label="产品类型：" style="margin-bottom: 0">
          <p class="type" style="font-size: 16px">
            {{ Number(info.goods_type) === 1 ? "包装材料" : "配套服务" }}
          </p>
        </m-form-item>
        <m-form-item
          prop="classifi"
          label="产品分类："
          style="margin-bottom: 0"
          v-if="info.class1"
        >
          <p class="classifi" style="font-size: 16px">
            {{ info.class1 && info.class1.cate_name }} {{ info.class2 && info.class2.cate_name ? `> ${info.class2 && info.class2.cate_name}` : '' }}
          </p>
        </m-form-item>
        <m-form-item
          prop="quantity"
          label="产品数量："
          style="margin-bottom: 0"
        >
          <p class="quantity" style="font-size: 16px">
            {{ info.goods_num }} {{ info.goods_unit === 0 ? '个' : info.goods_unit === 2 ? 'pcs' : '件' }}
          </p>
        </m-form-item>
        <m-form-item
          prop="condition"
          label="贸易条件："
          style="margin-bottom: 0"
        >
          <p class="name" style="font-size: 16px">{{ info.goods_condition }}</p>
        </m-form-item>
        <m-form-item prop="price" label="期望单价：" style="margin-bottom: 0">
          <p class="price" style="font-size: 16px">
            {{ info.goods_price }}{{ Number(info.currency) === 0 ? "人民币" : "元" }}
          </p>
        </m-form-item>
        <m-form-item
          label="产品图片："
          style="margin-bottom: 0; font-size: 16px"
        >
          <div class="pics-box" v-if="info.img_list">
            <div
              class="pic-item"
              v-for="(item, index) in info.img_list"
              :key="index"
            >
              <img :src="item" alt="" class="objectCover" />
            </div>
          </div>
          <div class="content f16" v-else>暂无</div>
        </m-form-item>
        <m-form-item
          prop="annex"
          label="产品附件："
          style="margin-bottom: 0; font-size: 16px"
        >
          <div class="annex-list" v-if="info.file_list">
            <div
              class="annex"
              v-for="(item, index) in info.file_list"
              :key="index"
            >
              <img src="~/assets/images/pdf-icon.png" alt="" class="pic" />
              <p class="name">{{ item }}</p>
            </div>
          </div>
          <div class="content f16" v-else>暂无</div>
        </m-form-item>
        <div v-show="showRemaining">
          <m-form-item
            prop="transform"
            label="运输方式："
            style="margin-bottom: 0"
          >
            <p class="transform f16">{{ info.transport_type }}</p>
          </m-form-item>
          <m-form-item
            prop="destination"
            label="目的地："
            style="margin-bottom: 0"
          >
            <p class="destination f16">{{ info.province }}{{ info.city }}</p>
          </m-form-item>
          <m-form-item
            prop="address"
            label="详细地址："
            style="margin-bottom: 0"
          >
            <p class="address f16">{{ info.address }}</p>
          </m-form-item>
          <m-form-item
            prop="expect"
            label="期望交期："
            style="margin-bottom: 0"
          >
            <p class="expect f16">{{ info.days }}天</p>
          </m-form-item>
          <m-form-item
            prop="payment"
            label="支付方式："
            style="margin-bottom: 0"
          >
            <p class="payment f16">
              {{ info.pay_type === 0 ? "线上支付" : "线下支付" }}
            </p>
          </m-form-item>
          <m-form-item prop="remarks" label="备注：" style="margin-bottom: 0">
            <p class="remarks f16">
              {{ info.remarks }}
            </p>
          </m-form-item>
        </div>
      </m-form>
      <div class="fold" @click="showRemaining = !showRemaining">
        {{ showRemaining ? "收起详情" : "展开详情" }}
        <img v-if="!showRemaining" src="~/assets/images/fold-icon.png" alt="" />
        <img
          v-else
          src="~/assets/images/fold-icon.png"
          alt=""
          style="transform: rotateX(180deg)"
        />
      </div>
      <!-- 已关闭状态不显示操作 -->
      <div class="btns" v-if="info.status !== 9 && info.status !== 3">
        <m-button
          width="123"
          type="grey"
          style="margin-right: 15px"
          @click="() => showDialog= true"
        >取消</m-button>
        <m-button
          v-if="[1,2].includes(info.status)"
          width="123"
          type="grey"
          style="margin-right: 15px"
          @click="edit"
        >去编辑</m-button>
        <m-button v-if="Number(info.status) === 2" width="123" @click="showTc">立即发布</m-button>
      </div>
    </div>
    
    <!-- 沟通列表 -->
    <div class="title">沟通列表</div>
    <div class="reply-wrap">
      <div class="reply-list" v-for="item in replyFormDataList" :key="item.id">
        <div class="user" v-if="item.role ==='用户'">
          <div class="avatar">{{item.role}}</div>
          <div class="_content">
            <p class="date">{{item.create_time}}</p>
            <p class="text">{{item.content}}</p>
          </div>
        </div>
        <div class="platform" v-else>
          <div class="avatar">{{item.role}}</div>
          <div class="_content">
            <p class="date">{{item.create_time}}</p>
            <p class="text">
              {{item.content}}
            </p>
          </div>
        </div>
      </div>
      <div class="form-wrap" v-if="info.status !== 3">
        <div class="title">用户回复</div>
        <m-form
          ref="replyForm"
          :model="replyFormData"
          :rules="rules"
          label-width="90px"
          lebal-position="left"
        >
          <m-form-item prop="content" label="回复：">
            <m-input
              type="textarea"
              v-model="replyFormData.content"
              :autosize="{ minRows: 6 }"
            />
          </m-form-item>
          <m-form-item style="margin-top: 80px">
            <div style="display: flex; justify-content: center">
              <m-button width="234" @click="handlerConfirm">提交</m-button>
            </div>
          </m-form-item>
        </m-form>
      </div>
    </div>

    <m-dialog title="平台提示" :show-dialog.sync="showDialog1">
      <p class="text dialog-tip">
        提交则默认您已阅读，理解并同意找包装网的委托平台规则。 是否立即发布？
      </p>
      <div class="btns" style="display: flex; justify-content: center">
        <m-button
          width="180"
          type="dark"
          @click="closeTc"
          style="margin-right: 10px"
          >取消</m-button>
        <m-button width="180" @click="publish">确定</m-button>
      </div>
    </m-dialog>
    <!-- 取消询价 -->
    <cancel-demand :showDialog.sync='showDialog' :demandId='id' @handleClose='handleClose' />
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import MDialog from "@/components/common/m-dialog/MDialog"
import CancelDemand from '../components/cancelDemand.vue'
import { requirementDe, entrustList, pubMyDemands, demandAddContent } from "@/request/api"

export default {
  name: "ConsignDetails",
  components: { MDialog, MButton, MInput, MFormItem, MForm, CancelDemand },
  data() {
    return {
      id: "",
      info: {
        class1: '',
        class2: ''
      },
      formData: {},
      showRemaining: false,
      replyFormData: {},
      rules: {
        content: [{ required: true, message: "请输入完整", trigger: "blur" }]
      },
      showDialog1: false,
      showDialog: false,
      replyFormDataList:[]
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getInfo()
  },
  methods: {
    /** 回复 */
    handlerConfirm() {
      demandAddContent({...this.replyFormData,demand_id: this.id}).then(res => {
        if(res.status !== 200) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.getEntrustList()
        this.replyFormData = {}
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    /** 关闭 */
    handleClose() {
      this.showDialog = false;
      this.$router.push('/profile/purchase-management/my-consign')
    },
    /** 委托详情 */
    getInfo() {
      let that = this
      requirementDe(this.id).then((res) => {
        if (res.status === 200) {
          that.info = res.data
          this.getEntrustList()
        } else {
          that.$toast.show(res.message, 1000, false)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    /** 委托回复详情 */
    getEntrustList() {
      entrustList({id:this.id}).then(res => {
        if(res.status !== 200) return this.$message.error(res.message)
        this.replyFormDataList = res.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    edit() {
      this.$router.push({ path: "/official", query: { id: this.id } })
    },
    showTc() {
      this.showDialog1 = true
    },
    closeTc() {
      this.showDialog1 = false
    },
    publish() {
      this.showDialog1 = false
      let data = {
        id: this.id,
        status: 1
      }
      pubMyDemands(data).then((res) => {
        if (res.status === 200) {
          this.$toast.show("发布成功", 1000, false)
          this.getInfo()
        } else {
          this.$toast.show(res.message, 1000, false)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.consign-details {
  margin-top: 30px;
  .pics-box {
    display: flex;
    .pic-item {
      width: 160px;
      height: 160px;
      border: 1px solid #eee;
      border-radius: 10px;
      margin-right: 15px;
      overflow: hidden;
      margin-bottom: 20px;
    }
  }
  > .title {
    width: 146px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: $theme-color-1;
    color: #fff;
  }

  .details-wrap {
    padding: 15px 20px;
    border: solid 1px #eaeaea;
    position: relative;
    margin-bottom: 50px;

    .inquiry {
      width: 192px;
      background-color: rgb(241, 241, 241);
      padding: 15px 10px;
      color: #969696;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      right: 15px;

      .date {
        margin-bottom: 10px;
      }
    }
    .fold {
      margin-top: 20px;
      color: $theme-color-1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      img {
        margin-top: 5px;
      }
    }
    .btns {
      display: flex;
      position: absolute;
      right: 0;
      top: -55px;
    }
    .annex-list {
      display: flex;
      align-items: center;

      .annex {
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .pic {
          width: 34px;
          height: 34px;
        }

        .name {
          font-size: 14px;
          @include text-omitted();
        }
      }
    }
  }

  .reply-wrap {
    padding: 15px 20px;
    border: solid 1px #eaeaea;

    .reply-list {
      margin-bottom: 50px;

      .user {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        &:not(:last-of-type) {
          margin-bottom: 50px;
        }

        .avatar {
          width: 59px;
          height: 59px;
          border-radius: 59px;
          background-color: rgb(243, 244, 247);
          border: solid 1px #eaeaea;
          line-height: 59px;
          text-align: center;
        }

        ._content {
          width: calc(97% - 59px);
          padding: 15px;
          background-color: rgb(243, 244, 247);
          border: solid 1px #eaeaea;
          color: #969696;

          .date {
            margin-bottom: 5px;
          }
        }
      }
      .user:after {
        content: "";
        width: 2px;
        height: 48px;
        position: absolute;
        left: 28px;
        top: 70px;
        background: #eee;
      }
      .platform {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        &:not(:last-of-type) {
          margin-bottom: 50px;
        }

        .avatar {
          width: 59px;
          height: 59px;
          border-radius: 59px;
          background-color: $theme-color-1;
          color: #fff;
          border: solid 1px #eaeaea;
          line-height: 59px;
          text-align: center;
        }

        ._content {
          width: calc(97% - 59px);
          padding: 15px;
          background-color: rgb(243, 244, 247);
          border: solid 1px #eaeaea;
          color: #969696;

          .date {
            margin-bottom: 5px;
          }
        }
      }
    }

    .form-wrap {
      .title {
        color: $theme-color-1;
        font-weight: bold;
        margin-bottom: 30px;
      }
    }
  }
  .dialog-tip {
    margin-bottom: 50px; font-size: 16px; line-height: 26px
  }
}
</style>
